<!--
 * @Description: 
 * @Version: 0.0.0
 * @Autor: 源
 * @Date: 2022-10-22 14:39:22
 * @LastEditors: 源
 * @LastEditTime: 2022-11-17 15:55:30
 * @FilePath: \pnpm-v3-ts-ui\docs\.vitepress\vitepress\vue\common\vp-preview.vue
-->
<template>
  <div class="preview">
    <div class="preview-template">
      <component :is="html" />
    </div>
    <div class="preview-footer">
      <div class="preview-footer-button">
        <span
          class="btn"
          title="在线运行"
        >
          <lm-icon name="codepen" />
        </span>
        <span
          class="btn"
          title="复制"
          v-copy="`${code}`"
        >
          <lm-icon name="copy" />
        </span>
        <span
          class="btn"
          title="查看代码"
          @click="show = !show"
        >
          <lm-icon name="code" />
        </span>
      </div>
    </div>
    <lm-collapse-transition>
      <div
        class="preview-code"
        v-if="show"
      >
        <pre v-highlight>
          <code class="vue" >
            {{ code }}
          </code>
        </pre>
        <div
          class="preview-code-footer"
          @click="show = !show"
        >
          隐藏代码
        </div>
      </div>
    </lm-collapse-transition>
  </div>
</template>
<script lang="ts">
export default {
  name: "VpPreview"
}
</script>
<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from 'vue';


const props = defineProps({
  compName: {
    type: String,
    require: true,
  },
  preview: { type: String, require: true, }
});

const show = ref(false)

var path = '../components'
var file = import.meta.glob('../components/**/*.vue');
//加载组件vue
const html = defineAsyncComponent(file[`${path}/${props.compName}/${props.preview}.vue`])
const code = ref('');
async function getCode() {
  //加载组件代码源
  const isDev = import.meta.env.MODE === "development";
  if (isDev) {
    code.value = (await import(`../components/${props.compName}/${props.preview}.vue?raw`)).default;
  } else {
    code.value = await fetch(`../components/${props.compName}/${props.preview}.vue`).then((res) => res.text());
  }
}

onMounted(() => {
  getCode();
});
</script>
